最終確認日2026年1月24日(土)

Next.js バージョンのアップデートをする(2026年1月)

現状把握

プロジェクト直下で実行

node -v
npm -v   # or pnpm -v / yarn -v
npx next --version

実行結果

$ node -v
v22.8.0
$ npm -v                                                    uruly/updateNextjs
10.8.2
$ npx next --version
Next.js v15.2.4

次に依存関係の最新版候補を確認

npm outdated # or pnpm outdated / yarn outdated

実行結果

Next.js のバージョンのみをあげてみる

まずは Next.js 本体のバージョンのみを上げてみる。

npm i next@latest # or pnpm add next@latest / yarn add next@latest

実行結果

added 2 packages, removed 7 packages, changed 9 packages, and audited 727 packages in 7s

259 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (3 low, 2 moderate)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

何か色々言われているがとりあえずアップデートができているか確認。

$ npx next --version                                                           
Next.js v16.1.4

その後に build と dev を行ってみる。

npm run build
npm run dev

ここで落ちたエラーを直していくぞい。

発生したエラー①

ESLint のエラーが起きている。

  Running TypeScript  .Failed to compile.

./next.config.ts:4:3
Type error: Object literal may only specify known properties, and 'eslint' does not exist in type 'NextConfig'.

  2 |
  3 | const nextConfig: NextConfig = {
> 4 |   eslint: {
    |   ^
  5 |     // Warning: This allows production builds to successfully complete even if
  6 |     // your project has ESLint errors.
  7 |     ignoreDuringBuilds: true,
Next.js build worker exited with code: 1 and signal: null

これはNext.js 16 以降は next lint が廃止され、それに伴って next.config の eslint オプションも不要になったらしい。

参考

Next.js ドキュメント - ESLint
【Next.js 16】next lint 廃止により起きる lint 失敗と ESLint CLI 移行手順

【Next.js 16】next lint 廃止により起きる lint 失敗と ESLint CLI 移行手順の通りに修正する。

next.config.ts から eslint オプションを削除
package.json を next lint から eslint . に変更
eslint.config.mjs を用意する

もう一度 npm run build をしよう。
このエラーは消えたのでok。

発生したエラー②

続いて revalidateTag でエラーが起きた。

  Running TypeScript  ...Failed to compile.

./src/app/api/revalidate/route.ts:27:7
Type error: Expected 2 arguments, but got 1.

  25 |     for (const tag of tags) {
  26 |       console.log("Revalidating tag:", tag);
> 27 |       revalidateTag(tag);
     |       ^
  28 |     }
  29 |   } else {
  30 |     console.log("No tags provided. Skipping revalidateTag.");
Next.js build worker exited with code: 1 and signal: null

Next.js のドキュメント - revalidateTagを見ると引数が増えている。

revalidateTag(tag: string, profile: string | { expire?: number }): void;

tag: 再検証したいデータに関連付けられたキャッシュタグを表す文字列です。256文字を超えることはできません。この値は、大文字と小文字を区別します。
profile: 再検証の動作を指定する文字列です。推奨される値は「max」で、stale-while-revalidate セマンティクスを提供します。または、cacheLife で定義されている他のデフォルトまたはカスタムプロファイルを指定することもできます。カスタム有効期限の動作のために、expire プロパティを持つオブジェクトを渡すこともできます。

とのことなので max をわたそう。修正したら npm run build を再度実行。

成功したので npm run dev も実行してみる。無事にローカル環境でみれたでok。

各ライブラリをアップデートしていく

各ライブラリをアップデートしていく。

npm update

実行結果

added 24 packages, removed 25 packages, changed 148 packages, and audited 726 packages in 29s

263 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

再度 npm outdated を確認してみる

$ npm outdated
Package              Current    Wanted   Latest  Location                         Depended by
@types/jest          29.5.14   29.5.14   30.0.0  node_modules/@types/jest         uruly.xyz
@types/node         20.19.30  20.19.30  25.0.10  node_modules/@types/node         uruly.xyz
dotenv                16.6.1    16.6.1   17.2.3  node_modules/dotenv              uruly.xyz
eslint-config-next    15.2.4    15.2.4   16.1.4  node_modules/eslint-config-next  uruly.xyz
jest                  29.7.0    29.7.0   30.2.0  node_modules/jest                uruly.xyz

`eslint-config-next` を Next.js のバージョンに揃える

Next.js v16.1.4 に合わせる。

npm i -D eslint-config-next@latest

実行結果

added 5 packages, removed 1 package, changed 3 packages, and audited 730 packages in 2s

265 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

バージョンがあげられたら動作確認をしてみる

npm run lint

ok .

Node のバージョンを上げる

Next.js 16 を使うなら Node 20.9 以上が必須(Node.js runtime and browser support)

現在 20.19.30 まで上がったのでさらにあげないといけない。

Node 24（Active LTS）にあげてみる。本体をまずあげる。

$ nvm install 24
Downloading and installing node v24.13.0...
Downloading https://nodejs.org/dist/v24.13.0/node-v24.13.0-darwin-arm64.tar.xz...
########################################################################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v24.13.0 (npm v11.6.2)

$ node -v
v24.13.0

Next.js プロジェクト上でも更新

 npm i -D @types/node@24

ok.

react/react-dom も更新

npm install react@latest react-dom@latest

ok.

その他 Next.js 16系でやること

How to upgrade to version 16をみる。

起きたWarning

ビルド時に起きていたwarning

The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy

middleware to proxyに書かれている。

mv middleware.ts proxy.ts で proxy.ts にリネームする
export function middleware(request: NextRequest) { を proxy に変更
middleware.test.ts も proxy.test.ts にリネーム
テストの中身も proxy に変更

okなはず。

公開日2026年1月24日(土)

更新日2026年1月24日(土)

最終確認日2026年1月24日(土)

Next.js バージョンのアップデートをする(2026年1月)

現状把握

プロジェクト直下で実行

node -v
npm -v   # or pnpm -v / yarn -v
npx next --version

実行結果

$ node -v
v22.8.0
$ npm -v                                                    uruly/updateNextjs
10.8.2
$ npx next --version
Next.js v15.2.4

次に依存関係の最新版候補を確認

npm outdated # or pnpm outdated / yarn outdated

実行結果

Next.js のバージョンのみをあげてみる

まずは Next.js 本体のバージョンのみを上げてみる。

npm i next@latest # or pnpm add next@latest / yarn add next@latest

実行結果

added 2 packages, removed 7 packages, changed 9 packages, and audited 727 packages in 7s

259 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (3 low, 2 moderate)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

何か色々言われているがとりあえずアップデートができているか確認。

$ npx next --version                                                           
Next.js v16.1.4

その後に build と dev を行ってみる。

npm run build
npm run dev

ここで落ちたエラーを直していくぞい。

発生したエラー①

ESLint のエラーが起きている。

  Running TypeScript  .Failed to compile.

./next.config.ts:4:3
Type error: Object literal may only specify known properties, and 'eslint' does not exist in type 'NextConfig'.

  2 |
  3 | const nextConfig: NextConfig = {
> 4 |   eslint: {
    |   ^
  5 |     // Warning: This allows production builds to successfully complete even if
  6 |     // your project has ESLint errors.
  7 |     ignoreDuringBuilds: true,
Next.js build worker exited with code: 1 and signal: null

これはNext.js 16 以降は next lint が廃止され、それに伴って next.config の eslint オプションも不要になったらしい。

参考

Next.js ドキュメント - ESLint
【Next.js 16】next lint 廃止により起きる lint 失敗と ESLint CLI 移行手順

【Next.js 16】next lint 廃止により起きる lint 失敗と ESLint CLI 移行手順の通りに修正する。

next.config.ts から eslint オプションを削除
package.json を next lint から eslint . に変更
eslint.config.mjs を用意する

もう一度 npm run build をしよう。
このエラーは消えたのでok。

発生したエラー②

続いて revalidateTag でエラーが起きた。

  Running TypeScript  ...Failed to compile.

./src/app/api/revalidate/route.ts:27:7
Type error: Expected 2 arguments, but got 1.

  25 |     for (const tag of tags) {
  26 |       console.log("Revalidating tag:", tag);
> 27 |       revalidateTag(tag);
     |       ^
  28 |     }
  29 |   } else {
  30 |     console.log("No tags provided. Skipping revalidateTag.");
Next.js build worker exited with code: 1 and signal: null

Next.js のドキュメント - revalidateTagを見ると引数が増えている。

revalidateTag(tag: string, profile: string | { expire?: number }): void;

tag: 再検証したいデータに関連付けられたキャッシュタグを表す文字列です。256文字を超えることはできません。この値は、大文字と小文字を区別します。
profile: 再検証の動作を指定する文字列です。推奨される値は「max」で、stale-while-revalidate セマンティクスを提供します。または、cacheLife で定義されている他のデフォルトまたはカスタムプロファイルを指定することもできます。カスタム有効期限の動作のために、expire プロパティを持つオブジェクトを渡すこともできます。

とのことなので max をわたそう。修正したら npm run build を再度実行。

成功したので npm run dev も実行してみる。無事にローカル環境でみれたでok。

各ライブラリをアップデートしていく

各ライブラリをアップデートしていく。

npm update

実行結果

added 24 packages, removed 25 packages, changed 148 packages, and audited 726 packages in 29s

263 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

再度 npm outdated を確認してみる

$ npm outdated
Package              Current    Wanted   Latest  Location                         Depended by
@types/jest          29.5.14   29.5.14   30.0.0  node_modules/@types/jest         uruly.xyz
@types/node         20.19.30  20.19.30  25.0.10  node_modules/@types/node         uruly.xyz
dotenv                16.6.1    16.6.1   17.2.3  node_modules/dotenv              uruly.xyz
eslint-config-next    15.2.4    15.2.4   16.1.4  node_modules/eslint-config-next  uruly.xyz
jest                  29.7.0    29.7.0   30.2.0  node_modules/jest                uruly.xyz

`eslint-config-next` を Next.js のバージョンに揃える

Next.js v16.1.4 に合わせる。

npm i -D eslint-config-next@latest

実行結果

added 5 packages, removed 1 package, changed 3 packages, and audited 730 packages in 2s

265 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

バージョンがあげられたら動作確認をしてみる

npm run lint

ok .

Node のバージョンを上げる

Next.js 16 を使うなら Node 20.9 以上が必須(Node.js runtime and browser support)

現在 20.19.30 まで上がったのでさらにあげないといけない。

Node 24（Active LTS）にあげてみる。本体をまずあげる。

$ nvm install 24
Downloading and installing node v24.13.0...
Downloading https://nodejs.org/dist/v24.13.0/node-v24.13.0-darwin-arm64.tar.xz...
########################################################################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v24.13.0 (npm v11.6.2)

$ node -v
v24.13.0

Next.js プロジェクト上でも更新

 npm i -D @types/node@24

ok.

react/react-dom も更新

npm install react@latest react-dom@latest

ok.

その他 Next.js 16系でやること

How to upgrade to version 16をみる。

起きたWarning

ビルド時に起きていたwarning

The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy

middleware to proxyに書かれている。

mv middleware.ts proxy.ts で proxy.ts にリネームする
export function middleware(request: NextRequest) { を proxy に変更
middleware.test.ts も proxy.test.ts にリネーム
テストの中身も proxy に変更

okなはず。

公開日2026年1月24日(土)

更新日2026年1月24日(土)

Next.js バージョンのアップデートをする(2026年1月)

現状把握

Next.js のバージョンのみをあげてみる

発生したエラー①

発生したエラー②

各ライブラリをアップデートしていく

eslint-config-next を Next.js のバージョンに揃える

Node のバージョンを上げる

react/react-dom も更新

その他 Next.js 16系でやること

起きたWarning

Next.js バージョンのアップデートをする(2026年1月)

現状把握

Next.js のバージョンのみをあげてみる

発生したエラー①

発生したエラー②

各ライブラリをアップデートしていく

eslint-config-next を Next.js のバージョンに揃える

Node のバージョンを上げる

react/react-dom も更新

その他 Next.js 16系でやること

起きたWarning

`eslint-config-next` を Next.js のバージョンに揃える

`eslint-config-next` を Next.js のバージョンに揃える